
<template>
  <div class="films">
    <SwiperComp>
      <div
        class="swiper-slide"
        v-for='banner in banners'
        :key='banner.bannerId'
      >
        <img width='100%' :src='banner.imgUrl'/>
      </div>
    </SwiperComp>
    <van-tabs v-model="active" color='#ff5f16' title-active-color='#ff5f16'>
      <van-tab badge='10' title="正在热映" to='/films/nowplaying' name='/films/nowplaying'></van-tab>
      <van-tab title="即将上映" to='/films/comingsoon' name='/films/comingsoon'></van-tab>
    </van-tabs>

    <!--将二级路由页面nowplaying放置在films的哪个位置-->
    <router-view></router-view>
  </div>
</template>

<script>
import { instance } from '@/utils/http'
import SwiperComp from '@/components/swiperComp'
import Swiper from 'swiper'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs)
export default {
  methods: {
    clickTabs(name) {
      this.$router.push(name)
    }
  },
  components: {
    SwiperComp
  },
  data() {
    return {
      banners: [],
      active: this.$route.fullPath
    }
  },
  async created() {
    const res = await instance.get('/gateway?type=2&cityId=310100&k=3939794', {
      headers: {
        'X-Host': 'mall.cfg.common-banner'
      }
    })
    // console.log(res)
    this.banners = res.data.data

    // 实例化轮播图操作
    // 数据改变了，内部进行虚拟dom的diff算法，对比差异，最终采去更新真实dom结构。
    this.$nextTick(() => { // 更新的延迟回调之后才会执行
      // eslint-disable-next-line no-new
      new Swiper('.swiper-container', {
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        }
      })
    })
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep .swiper-pagination-bullet-active{
    background: orange!important;
  }
</style>
